<!-- 商品描述的相关信息 -->
<template>
    <!-- 这个方法是为了判断goodsinfo对象是不是空的 -->
    <div v-if="Object.keys(goodsinfo).length !==0">
         <p>{{goodsinfo.title}}</p>
         <div class="price">
             <span>{{goodsinfo.newPrice}}</span>
             <span>{{goodsinfo.oldPrice}}</span>
             <span v-if="goodsinfo.discount">{{goodsinfo.discount}}</span>
         </div>
         <div class="by">
               <span v-if="this.goodsinfo.columns">{{goodsinfo.columns[0]}}-</span>
               <span v-if="this.goodsinfo.columns">{{goodsinfo.columns[1]}}-</span>
               <span v-if="this.goodsinfo.services">{{goodsinfo.services[goodsinfo.services.length-1].name}}</span>
         </div>
         <div v-if="this.goodsinfo.services"  class="interest">
               <span v-for="index in goodsinfo.services.length-1" :key="index">
                    <img :src="goodsinfo.services[index-1].icon" alt="">
                    <span>{{goodsinfo.services[index-1].name}}</span>
               </span>
         </div>
    </div>
</template>
    
<script>
export default {
  name:"goodinfo",

  props: {
       goodsinfo:{
           type:Object,
           default () {
               return {}
           }
       }
  },

}

</script>
<style scoped>
.price{
     margin-top: 10px ;
}
.price>span:nth-child(1){
      color: red;
}
.price>span:nth-child(2){
      color: gray;
      font-size: 10px;
      margin-left: 10px;
      text-decoration:line-through; 
}
.price>span:nth-child(3){
       color: red;
       margin-left: 5px;
}
.by{
     margin-top: 20px;
     font-size: 10px;
     border-bottom: 1px solid gray;
     display: flex;
     color: gray;
}
.by>span:nth-child(1){
     flex: 1;
}
.by>span:nth-child(2){
     flex: 1;
}
.interest{
     font-size: 12px;
     margin-top: 15px;
     display: flex;
     border-bottom: 1px solid gray;
     height: 30px;
}
.interest>span{
     flex: 1;
}
.interest img{
     width: 10px;
     vertical-align: middle;
     
}





</style>